<!-- 音乐盒内容区 -->
<template>
  <div class="content-mid">
    <div class="mid-left">
      <ul>
        <li class="songbox" v-for="item in songList" :key="item.id">
          <span @click="play(item)" class="icon mp3"></span><span style="text-overflow: ellipsis" class="musicname">{{ item.name }}</span
          ><span @click="movie(item)" :class="[{icon:item.mvid===0?false:true},{mv:item.mvid===0?false:true}]"></span>
        </li>
      </ul>
    </div>
    <!-- <musicbar :picUrl="picUrl"></musicbar> -->
    <div is="musicbar" :picUrl="picUrl" :dishstatus="dishstatus" :disconstatus="disconstatus"></div>
    <div class="mid-right">
      <div class="talking" v-for="item in talking" :key="item.commentId">
        <div class="talk-top">
          <img :src="item.user.avatarUrl" alt="" />
          <p>{{item.user.nickname}}</p>
        </div>
        <div class="talk-und">{{item.content}}</div>
      </div>
    </div>
  </div>
</template>

<script>
import musicbar from '@/components/musicbar.vue'
export default {
  components:{
    musicbar
  },
  mounted() {
    console.log(this.songList)
  },
  props: {
    talking:{
      type:Array,
      default:()=>{
        return []
      }
    },
    picUrl:{
      type: String,
      default:""
    },
    songList: {
      type: Array,
      default: () => {
        return [];
      },
    },
     playUrl:{
        type: String,
        default:""
     },
      dishstatus:{
        type:Boolean,
        default:false
      },
     disconstatus:{
        type:Boolean,
        default:false
      },
  },
  data() {
    return {
    
      
      
    };
  },

  methods: {
      play:function(song){
          this.$axios.get("/song/url",{
            params:{
              id:song.id
            }
          }).then((result) => {
            // console.log(result)
            let playUrl=result.data.data[0].url
            console.log(playUrl)
            this.$emit("updataurl",playUrl)
          }).catch((err) => {
            console.log(err)
          });
           this.$axios.get("/comment/music",{
            params:{
              id:song.id,
              limit:50
            }
          }).then((result) => {
           let talking=result.data.comments
            this.$emit("updatatalking",talking)
          }).catch((err) => {
            console.log(err)
          });
          this.$axios.get("/song/detail",{
            params:{
              ids:song.id,
            }
          }).then((result) => {
            // console.log(result.data.songs[0].al.picUrl)
            let picUrl=result.data.songs[0].al.picUrl
           this.$emit("updatapicurl",picUrl)
          }).catch((err) => {
            console.log(err)
          });
          this.$emit("sendstatus",true,true)
         /*  this.dishstatus= true,
          this.disconstatus= true */
          
           
      },
      movie:function(data){
        console.log(data.mvid)
        this.$axios.get("/mv/url",{
           params: {
                id:data.mvid
                },
        }).then((result) => {
          console.log(result.data.data.url)
          // location.href=result.data.data.url
          this.$emit("gomove",result.data.data.url,true)
        }).catch((err) => {
          console.log(err)
        });
      }
  },
};
</script>
<style  scoped>
.musicname{
    text-align: center;
    width: 120px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    
}
.songbox{
    overflow-x: hidden;
}
.mid-right{
  overflow-y: auto;
}




</style>
